﻿<body class="c1">

    <div id="container">

        <div id="contents">

            <div id="main">

                <section>

                    <h2>READ ME<span>Things about Aquarium SuiSui (AQSS)</span></h2>

                    <h3>About This Page</h3>
                    <p>
                        This site is created with a freely distributed template in <a href="https://template-party.com/">Template Party</a>.<br />
                        The <a href="https://template-party.com/read.html">regulations</a> are here (only in Japanese).
                    </p>
                    <p>
                        <strong class="color1">■This page is powered by ASP.NET MVC.</strong><br>
                        This is a web framework created by Microsoft. Easy to develop, easy to run!
                    </p>
                    <p>
                        <strong class="color1">■The main language of this page is English.</strong><br>
                        Also, it may contain Chinese or Japanese or maybe some other languages.
                    </p>

                    <h3>About Javascript code used in this page</h3>
                    <p>
                        All the Javascript files are created by <a href="http://www.crytus.co.jp/">有限会社クリタス様</a>.<br>
                        Their regulations are <a href="https://template-party.com/free_program/openclose_license.html">here</a>. Thanks for their technical support!
                    </p>

                </section>

                <section>

                    <h2>ABOUT<span>Some More Things About This Site</span></h2>

                    <h3>About The Server</h3>
                    <p>
                        The site is running on a cloud server running Windows Server 2012 R2.<br />
                        The server software is IIS Server 8 and the database is SQL Server 2014 Express.<br />
                        The whole program is developed and running under Microsoft .NET Framework 4.5.
                    </p>

                    <h3>About Your Browser</h3>
                    <p>
                        A Chrome browser is recommended for viewing this website. The Internet Explorer may not be supported properly.<br />
                        To ensure the best performance, please enable Javascript.
                    </p>

                    <h3>About Your Device</h3>
                    <p>
                        This site is using interactive pages, supporting many kinds of devices.<br />
                        Devices from smart phones to desktop computers can all have a great experience!
                    </p>

                    <!--
                    <h3>小さい端末（※幅900px以下）の環境でのみ</h3>
                    <p>メインメニューが折りたたみ式（３本バーアイコン化）になります。バーのスタイル設定もstyle.cssで行う事ができます。</p>

                    <h3>画像ベースは</h3>
                    <p>
                        「base」フォルダに入っていますのでご自由にご活用下さい。<br>
                        写真の元素材を当社運営の<a href="https://photo-chips.com/">PHOTO-CHIPS</a>や<a href="https://decoruto.com/">DECORUTO</a>で配布している場合もございます。
                    </p>
                    -->

                </section>

                <!--
                <section>

                    <h2>HOW TO<span>当テンプレートの使い方</span></h2>

                    <h3>トップページを２種類用意しています</h3>
                    <p>
                        <a href="index.html">index.html</a>と、以下のシンプル版の<a href="index2.html">index2.html</a>です。<br>
                        index2.htmlをトップページにしたい場合は、ファイル名をindex.htmlに上書きして下さい。<br>
                        <a href="index2.html"><img src="images/index2.jpg" alt="" width="400" class="border1"></a>
                    </p>

                    <h3>初心者向けマニュアル公開中</h3>
                    <p>
                        画像加工やテンプレートの編集方法、無料サーバーを使ってサイトを公開するなど動画をまじえてわかりやすく解説しています。<br>
                        <a href="https://template-party.com/file/" target="_blank">初心者向けマニュアルはこちら。</a>
                    </p>

                    <h3>注意：当テンプレートにはメインメニューが「２箇所」入っています</h3>
                    <p>パソコンなどの大きな端末「menubar（幅901px以上）」向けと、タブレットやスマホなどの小さな端末「menubar-s（幅900px以下）」向けがそれぞれ入っています。大きな端末向けは編集ソフトで見れると思いますが、小さな端末向けは見えないと思いますのでhtml側で編集して下さい。</p>

                    <h3>titleタグ、copyright、metaタグ、他の設定</h3>
                    <p>
                        <strong class="color1">titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。</strong><br>
                        まず、htmlソースが見れる状態にして、<br>
                        <span class="look">&lt;title&gt;インディーズバンド・アーティスト向け 無料ホームページテンプレート tp_band1&lt;/title&gt;</span><br>
                        を編集しましょう。<br>
                        あなたのホームページ名が「INDIES BAND」だとすれば、<br>
                        <span class="look">&lt;title&gt;INDIES BAND&lt;/title&gt;</span><br>
                        とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。
                    </p>
                    <p>
                        <strong class="color1">copyrightを変更しましょう。</strong><br>
                        続いてhtmlの下の方にある、<br>
                        <span class="look">Copyright&copy; INDIES BAND All Rights Reserved.</span><br>
                        の部分もあなたのサイト名に変更します。
                    </p>
                    <p>
                        <strong class="color1">metaタグを変更しましょう。</strong><br>
                        htmlソースが見える状態にしてmetaタグを変更しましょう。
                    </p>
                    <p>
                        ソースの上の方に、<br>
                        <span class="look">content=&quot;ここにサイト説明を入れます&quot;</span><br>
                        という部分がありますので、テキストをサイトの説明文に入れ替えます。検索結果の文面に使われる場合もありますので、見た人が来訪したくなるような説明文を簡潔に書きましょう。
                    </p>
                    <p>
                        続いて、その下の行の<br>
                        <span class="look">content=&quot;キーワード１,キーワード２,～～～&quot;</span><br>
                        も設定します。ここはサイトに関係のあるキーワードを入れる箇所です。10個前後ぐらいあれば充分です。キーワード間はカンマ「,」で区切ります。
                    </p>
                    <p>
                        <strong class="color1">h1ロゴのaltタグも変更しましょう。</strong><br>
                        html側に、<br>
                        <span class="look">alt=&quot;INDIES BAND&quot;</span><br>
                        となっている箇所があるので、この部分もあなたのサイト名に変更しましょう。
                    </p>

                    <h3>上部のロゴ画像について</h3>
                    <p>文字なしの土台画像がbaseフォルダに入っていますのでそれにサイト名をのせてimagesフォルダに上書きして下さい。画像の大きさは自由に変更してもらっても構いませんがある程度大きくしておいた方が高解像度の端末で鮮明に見えます。</p>

                    <h3>トップページオープニングのロゴマークのアニメーションについて</h3>
                    <p class="check">
                        <strong>※「vivus.js」のダウンロードが必要です。</strong><br>
                        ダウンロード直後のままではロゴのSVGアニメーションは動きません。必ず<a href="https://template-party.com/file/vivus.html">マニュアルをご覧下さい</a>。設定は簡単です。
                    </p>
                    <p>※アニメーションはIE8以下は表示されません。また、スライドショーがIE10以上でしか動作しないので、代わりに固定画像を表示させている分、ロゴアニメーションもこれに隠れます。つまり、ロゴアニメーションもスライドショーと同じIE10以上で見れるという事になります。</p>
                    <p>
                        <strong class="color1">速度の調整をしたい場合</strong><br>
                        index.htmlのhtml側の下にある、<br>
                        duration: 150,	//アニメーションの速度<br>
                        の150を変更してみて下さい。
                    </p>
                    <p>
                        <strong class="color1">オリジナルの作品に置き換えたい場合。アウトライン化できるならイラストなどもOKです。</strong><br>
                        Illustratorを持っている人であればアウトライン化してSVG出力する事でアニメーションを置き換える事もできます。<br>
                        <a href="https://template-party.com/file/vivus_ai.html">Illustratorで自作したい方はこちらのマニュアルをご覧下さい。</a><br>
                        Illustratorを持っていなくてもSVG化してくれるサイトがあるようなので、そちらで変換したものをテキストエディタなどで開いてコードを抜き出す方法もあります。<br>
                        又は、完成したアニメーション画像を配布しているサイトもあるようなので、簡単に入れ替えたい人は利用されるといいと思います。
                    </p>
                    <p>
                        <strong class="color1">SVGタグ出力までの代行をしています。</strong><br>
                        SVGタグ出力までの作業代行を承っております。費用は2,000円〜5,000円ほど。※ロゴデザインは含まず。<br>
                        ロゴは手描きでも構いませんがコントラストがしっかりしていないとアウトライン化できません。繊細な絵は不可。<br>
                        まずはお問い合わせ下さい。
                    </p>

                    <h3>トップページのスライドショーについて</h3>
                    <p>
                        <strong class="color1">css3に対応した環境(IEなら10以上)でしか動作しません。</strong><br>
                        古いブラウザでは固定画像になります。<br>
                        古いブラウザ向けの固定画像の指定は、index.htmlのhead内の、<br>
                        <span class="look">.slide1,.slide2,.slide3 {background: url(images/1.jpg) no-repeat center center;}</span><br>
                        部分です。<br>
                        この「images/1.jpg」が表示されます。古いブラウザ専用に別の画像を用意する場合は、ここの画像ファイル名を変更して下さい。
                    </p>
                    <p>
                        <strong class="color1">画像を入れ替えたい場合</strong><br>
                        「1.jpg」、「2.jpg」、「3.jpg」の3枚のjpg画像を用意してimagesフォルダに上書きして下さい。<br>
                        拡張子が「jpeg」や「JPG」と少し違った場合にうまく表示できない可能性があるので「jpg」で統一して下さい。画像を「jpg」にできない場合はcssフォルダのslide.cssの拡張子指定を変更しても構いません。<br>
                        画像の容量はできるだけしぼって下さい。重いと動きがガタつきます。<br>
                        画像サイズについては、cssの背景画像（cover）なので適当で構いません。ただ、縦端末、横端末で画像がトリミングされますので、切れてもおかしくない画像を用意して下さい。
                    </p>
                    <p>
                        <strong class="color1">１枚ごとにリンク設定ができます。</strong><br>
                        ３枚とも、news.htmlへのリンク設定が入っています。必要に応じて調整して下さい。<br>
                        リンクを使わない場合は、リンクタグを削除して下さい。
                    </p>
                    <p>
                        <strong class="color1">固定画像にしたい場合</strong><br>
                        cssフォルダ内にあるslide.cssの<br>
                        <span class="look">/*CSSスライドショーアニメーション設定</span><br>
                        のブロックを全て削除。<br>
                        あとはhtml側から残したい画像の行以外を削除。
                    </p>
                    <p>
                        スライドショーから固定画像にすると、当然ロゴアニメーションも隠れて出なくなります。<br>
                        その間、headerブロックの待機時間が長く感じると思いますので、cssフォルダのstyle.cssの、<br>
                        <span class="look">.home header {</span><br>
                        ブロックにある、<br>
                        <span class="look">	animation-delay: 5s;		/*アニメーションを遅れて開始させる。「s」は秒の事。*/</span><br>
                        の5sを1sなどに変更して下さい。
                    </p>
                    <p>
                        <strong class="color1">速度や枚数などの調整</strong><br>
                        cssフォルダのslide.cssで行って下さい。解説も入っています。<br>
                        <a href="https://template-party.com/tips/slide_css.html">スライドショーに関する詳しい使い方はこちら。</a>
                    </p>

                    <h3>リストタグを使いたい場合の注意点</h3>
                    <p>そのままではリストマークが出ませんので、リストタグを使う場合は以下のようなスタイルを追加して下さい。</p>
                    <p>
                        &lt;ul <span class="color1">class=&quot;disc&quot;</span>&gt;<br>
                        &lt;li&gt;リストタグ&lt;/li&gt;<br>
                        &lt;li&gt;リストタグ&lt;/li&gt;<br>
                        &lt;li&gt;リストタグ&lt;/li&gt;<br>
                        &lt;/ul&gt;
                    </p>
                    <p>↓出力例</p>
                    <ul class="disc">
                        <li>リストタグ</li>
                        <li>リストタグ</li>
                        <li>リストタグ</li>
                    </ul>
                    <ol>
                        <li>olタグはそのままででます。</li>
                        <li>olタグはそのままででます。</li>
                        <li>olタグはそのままででます。</li>
                        <li>olタグはそのままででます。</li>
                    </ol>

                    <h3>上部の横並びメニュー</h3>
                    <p>現状から増やすと、ウィンドウ幅を狭くしていく段階で右側のアイコンブロックと重なるので注意して下さい。</p>

                    <h3>現在ページ表示中のメニューについて</h3>
                    <p>
                        当ページでいえば上部メインメニューの「READ ME」に色がついていますが、その設定の説明です。<br>
                        通常は、<br>
                        &lt;li&gt;&lt;a href=&quot;&quot;&gt;メニュー名&lt;/a&gt;&lt;/li&gt;<br>
                        のようになっていますがこれを、<br>
                        &lt;li <span class="color1">class=&quot;current&quot;</span>&gt;・・・<br>
                        とする事で色がつきます。自動で色がつくわけではないのでご注意下さい。
                    </p>

                    <h3>スクロール中に出る「↑」アイコンについて</h3>
                    <p>
                        fixmenu_pagetop.jsで動作の制御を、cssフォルダのstyle.css内の<br>
                        /*PAGE TOP（↑）設定<br>
                        でボタンデザインを設定しています。<br>
                        ボタンの出現ポイントは、現在350pxの場所になっています。変更したい場合はfixmenu_pagetop.jsの34行目あたりにある、<br>
                        offsettop = 350;<br>
                        の350を変更して下さい。
                    </p>

                    <h3>１カラムレイアウトに簡単にチェンジできます</h3>
                    <p><a href="c1.html">c1.htmlをご覧下さい。</a></p>

                </section>
                -->

            </div>
            <!--/#main-->

            <div id="sub">

            </div>
            <!--/#sub-->

        </div>
        <!--/#contents-->
        <!--
        <footer>
            <small>Copyright&copy; <a href="/Home/Index">RIKA-P</a> All Rights Reserved.</small>
            <span class="pr"><a href="https://template-party.com/" target="_blank">《Web Design:Template-Party》</a></span>
        </footer>
        -->

    </div>
    <!--/#container-->
    <!--ページの上部に戻る「↑」ボタン-->
    <p class="nav-fix-pos-pagetop"><a href="#">↑</a></p>

    <!--メニュー開閉ボタン-->
    <div id="menubar_hdr" class="close"></div>

    <!--メニューの開閉処理条件設定　900px以下-->
    <script>
        if (OCwindowWidth() <= 900) {
            open_close("menubar_hdr", "menubar-s");
        }
    </script>

    <!--パララックス用ファイル読み込み-->
    <script src="~/Scripts/jquery.inview.js"></script> <!--It seems that it's useless-->
    <script src="~/Scripts/jquery.inview_set.js"></script>
</body>
